<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
        }
      h1 { color: grey;}
      .mermaid2,.mermaid3 {
        display: none;
      }
      .mermaid svg {
        /* font-size: 18px !important; */
      }
    </style>
  </head>
  <body>
    <div>info below</div>
    <div class="flex">

<div class="mermaid3" style="width: 100%; height: 20%;">
stateDiagram-v2
  state S1 {
    sub1 -->sub2
  }

  state S2 {
    sub4
  }
  S1 --> S2
  sub1 --> sub4

</div>
<div class="mermaid3" style="width: 100%; height: 20%;">
stateDiagram
  state CompositeState {
      YourState123456789012345123456789123456789012345123456789123456789012345123456789123456789012345123456789 --> MyState:a label
    }

</div>
<div class="mermaid3" style="width: 100%; height: 20%;">
flowchart
subgraph CompositeState
  subgraph AnotherCompositeStateCompositeStateCompositeStateCompositeState
      YourState --a label--> MyState
  end

end
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: { "apa":"b", "theme":"forest"}}%%
sequenceDiagram
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
</div>
    <div class="mermaid2">
      %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
      %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
      graph LR
          A --> B
    </div>
<div class="mermaid2" style="width: 100%; height: 20%;">
flowchart TD
  Link --> b
  click Link href "&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29" "Tooltip for
Amet"
  </div>
<div class="mermaid2" style="width: 100%; height: 20%;">
stateDiagram-v2
state CS {
state ACS {
YourState
}
}
  </div>
<div class="mermaid2" style="width: 100%; height: 20%;">
      stateDiagram-v2
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.

        SomethingElse --> [*]  </div>
  <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
          // console.error('Mermaid error: ', err);
        };
      mermaid.initialize({
        theme: 'base',
        arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 2,
        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
        htmlLabels: true,
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"times", sans-serif',
        // fontFamily: 'courier',
        state:{
          nodeSpacing: 50,
          rankSpacing: 50,
          defaultRenderer: 'dagre-wrapper',
        },
        logLevel:0,
        fontSize: 18,
        curve: 'cardinal',
        securityLevel: 'strict',
        // themeVariables: {relationLabelColor: 'red'}
      });
      function callback(){alert('It worked');}
    </script>
  </body>
</html>
